<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>会员管理</title>
</head>

<body>
<div id="content" layout:fragment="content">

    <script type="text/javascript">

		function paging(page){
		    $("[name=page]").val(page);
		    $("#searchForm").submit();
		}
        $(function(){
        	
            var options = {
                    currentPage: $("[name=page]").val(),
                    totalPages: $("[name=totalPage]").val(),
                    alignment:"left",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    pageUrl: function(type,page,current){
                        return "javascript:paging('"+page+"');";
                    }
                }
                $('#example').bootstrapPaginator(options);
             $(".btn-danger").click(function(e){
                if(confirm("确定删除吗?"))
                {
                    $.ajax({
                        url:'/userManage/userDelete.json?id='+ e.currentTarget.id,
                        type:'POST',
                        dataType:"json",
                        success:function(date) {
                            if(date.obj){
                                $(".close").click();
                                alert("删除成功！");
                                window.location.href = "/userManage/userList.htm";
                            }else{
                               alert("删除有误！");
                                window.location.href = "/userManage/userList.htm";
                            }
                        }
                    });
                }
            }); 
            
            //选中查询前的状态
            $("#status option[value="+$('#status_value').val()+"]").attr("selected", "true");
            
            $('.editLanguageBT').click(function(e){
                e.preventDefault();
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#edit_userName").val($("#userName-"+e.currentTarget.id).val());
                $("#edit_name").val($("#name-"+e.currentTarget.id).val());
                //$("#edit_password").val($("#password-"+e.currentTarget.id).val());
                //$("#edit_passwordAgain").val($("#password-"+e.currentTarget.id).val());
                $("#edit_email").val($("#email-"+e.currentTarget.id).val());
                $("#edit_microblog").val($("#microblog-"+e.currentTarget.id).val());
                $("#edit_renren").val($("#renren-"+e.currentTarget.id).val());
                $("#edit_phone").val($("#phone-"+e.currentTarget.id).val());
                $("#edit_wechat").val($("#wechat-"+e.currentTarget.id).val());
                if($("#status-"+e.currentTarget.id).val()==1){
                	document.getElementById("edit_status1").checked=true;
                } else{
                	document.getElementById("edit_status2").checked=true;
                }
                
                $("#edit_id").val(e.currentTarget.id);
                $('#editModel').modal('show');
            });

            //添加用戶前
            $(".btn-setting").click(function(e){
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#add_userName").attr('value','');                
                $("#add_name").attr('value','');
                $("#add_password").attr('value','');
                $("#add_passwordAgain").attr('value','');
                $("#add_email").attr('value','');
                $("#add_microblog").attr('value','');
                $("#add_renren").attr('value','');
                $("#add_phone").attr('value','');
                $("#add_wechat").attr('value','');
                document.getElementById("add_status1").checked=true;

            })
            $("#updateSysUser").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	userName : {
                        required: true,
                        maxlength:20,
                        remote:{
                            url: "/userManage/checkUserName.json",
                            type: "post",
                            data:{
                            	userName: function(){return $("#edit_userName").val();},
            					id: function(){return $("#edit_id").val();}
                            }
                        }
                    },
                    password : {
                        required: true
                    },
                    passwordAgain : {
                        required: true,
                        equalTo: "#edit_password"
                    },
                    email : {
                        required: true,
                        isEmail:true
                    }
                },
                messages : {
                	userName : {
                        required : "必须填写",
                        maxlength : "最多输入20个字符",
                        remote: "输入的登录名已存在"
                    },
                    password : {
	                    required : "必须填写"
	                },
	                passwordAgain : {
	                    required : "必须填写",	                    	
	                    equalTo :"两次密码输入不一致"
	                },
	                email : {
	                    required : "必须填写",
	                    isEmail:"邮箱格式有误"
	                }
                },
                submitHandler : function(form) {

                	$("#updateSysUser").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("修改成功了！");
                            $(".close").click();
                            window.location.href = "/userManage/userList.htm";
                        } else{
                        	alert("修改失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $("#addSysUser").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {                	
                    userName : {
                    	required: true,
                    	maxlength:20,
                        remote:{
                            url: "/userManage/checkUserName.json",
                            type: "post",
                            data:{
                            	userName: function(){return $("#add_userName").val();}
                            }
                        }
                    },
                    password : {
                    	required: true
                    },
                    passwordAgain : {
                        required: true,
                        equalTo: "#add_password"
                    },
                    email : {
                        required: true,
                        isEmail:true
                    }
                },
                messages : {
                    userName : {
                    	required : "必须填写",
                    	maxlength:"最多输入40个字符",
                        remote: "输入的登录名已存在"
                    },
                    password : {
                    	required : "必须填写"
                    },
                    passwordAgain : {
	                    required : "必须填写",
	                    equalTo :"两次密码输入不一致"
	                },
	                email : {
	                    required : "必须填写",
	                    isEmail:"邮箱格式有误"
	                    
	                }
                },
                submitHandler : function(form) {
                    $("#addSysUser").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/userManage/userList.htm";
                        } else{
                        	alert("保存失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $(".btn-inverse").click(function(e){
                $("#page").attr("value","1");
            })
        });
        function resetPwd(){
        	var id=$("#edit_id").val();
			$.post("/userManage/userAddOrUpdate.json", {
				"id" : id,
				"password" : '88888888'
			}, function(data) {
				if(data.suc){
                    alert("密码已被重置！");  
                    window.location.href = "/userManage/userList.htm";
                } else{
                	alert("密码重置失败了！");
                }
			}, "json");
		}            
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
                <h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">会员管理</span>
                </h3>
                <!-- <h3 class="row-fluid header smaller lighter blue" style="border:none;">
                    <a href="#" class="btn btn-small btn-success btn-setting" data-toggle="modal" data-target="#myModal"><i class="icon-user"></i>新建会员</a>
                </h3> -->
                
                <form action="/userManage/userList.htm" method="post" id="searchForm" style="margin-left:10px;">
		            <input type="hidden"  id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />		            
		            <input type="hidden" id="status_value" th:value="${page.filter[status]}" />
		            	<span class="topword">登录名UID：</span><input type="text" class="input-xlarge focused" name="userName" th:value="${page.filter[userName]}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            	<span class="topword">用户状态：</span>
		            			<select name="status" id="status">
		            				<option value="">全部</option>
		            				<option value="1">开启</option>
		            				<option value="2">关闭</option>
		            			</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            <input type="submit" class="btn btn-info btn-inverse tpbtn" value="搜索"/>				
		        </form>
        
                <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                           
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">登录名UID</th>
                            <th style="text-align: center;">姓名</th>
                            <th style="text-align: center;">用户状态</th>
                            <th style="text-align: center;">创建时间</th>
                            <th style="text-align: center;">操作管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="user:${page.result}">
                        	<td th:text="${user.id}" style="text-align: center;"></td>
                            <td th:text="${user.userName}" style="text-align: center;"></td>
                            <td th:text="${user.name}" style="text-align: center;"></td>
                            <td  style="text-align: center;">
                              <span th:if="${user.status == 1}">开启</span>
                              <span th:if="${user.status == 2}">关闭</span>
                            </td>
                            <td th:text="${user.createTime}" style="text-align: center;"></td>
                            <td style="text-align: center;">
                                <!--  <a class="deletebtn btn btn-small btn-danger" th:id="${user.id}" style="width: 26px;">
                                    删除                                   
                                </a>  -->
                                 <a class="editbtn btn btn-info btn-small editLanguageBT" th:id="${user.id}" style="width: 26px;">                                  
                            编辑                                                                                                                     
                                </a> 
                            <input type="hidden" th:id="'userName-'+${user.id}" th:value="${user.userName}"/>
                            <input type="hidden" th:id="'name-'+${user.id}" th:value="${user.name}"/>                            
                            <input type="hidden" th:id="'status-'+${user.id}" th:value="${user.status}"/>
                            <input type="hidden" th:id="'createTime-'+${user.id}" th:value="${user.createTime}"/>
                            <input type="hidden" th:id="'createUser-'+${user.id}" th:value="${user.createUser}"/>
                            <input type="hidden" th:id="'updateTime-'+${user.id}" th:value="${user.updateTime}"/>
                            <input type="hidden" th:id="'updateUser-'+${user.id}" th:value="${user.updateUser}"/> 
                            <input type="hidden" th:id="'email-'+${user.id}" th:value="${user.email}"/>
                            <input type="hidden" th:id="'microblog-'+${user.id}" th:value="${user.microblog}"/>
                            <input type="hidden" th:id="'renren-'+${user.id}" th:value="${user.renren}"/>
                            <input type="hidden" th:id="'phone-'+${user.id}" th:value="${user.phone}"/>
                            <input type="hidden" th:id="'wechat-'+${user.id}" th:value="${user.wechat}"/>                               
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
		                <div id="example" style="margin-bottom:0px"></div>
		            </div>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>
    <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>新增会员</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/userManage/userAddOrUpdate.json" method="post" id="addSysUser">
            <fieldset>
                <div class="modal-body">
                
                    <div class="control-group">
                        <label class="control-label">登录名UID：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="userName" id="add_userName"/>
                        </div>
                    </div>
                                                                          
                    
                    <div class="control-group">
                        <label class="control-label">登录密码：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="password" value="" name="password" id="add_password"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">确认密码：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="password" value="" name="passwordAgain" id="add_passwordAgain"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">姓名：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="add_name"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">邮箱：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="email" id="add_email"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">微博 ：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="microblog" id="add_microblog"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">人人：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="renren" id="add_renren"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">手机：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="phone" id="add_phone" maxlength="11"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">微信：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="wechat" id="add_wechat"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">会员状态：</label>
                        <div class="controls" style="margin-top: 5px;">
                            	<input class="input-xlarge focused"  type="radio" value="1" name="status" id="add_status1" checked="true"/>开启	
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	<input class="input-xlarge focused"  type="radio" value="2" name="status" id="add_status2"/>关闭	
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑会员</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/userManage/userAddOrUpdate.json" method="post" id="updateSysUser">
             <input id="edit_id" name="id" type="hidden"/>
            <fieldset>
                <div class="modal-body">
                
                	<div class="control-group">
                        <label class="control-label">登录名UID：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="userName" id="edit_userName"/>
                        </div>
                    </div>
                    
                   <!-- <div class="control-group">
                        <label class="control-label">密码：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="password" value="" name="password" id="edit_password" />
                        </div>
                    </div>
                                                          
                    <div class="control-group">
                        <label class="control-label">确认密码：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="password" value="" name="passwordAgain" id="edit_passwordAgain" />
                        </div>
                    </div> -->
                    <div class="control-group">
                        <label class="control-label">姓名：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="edit_name"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">邮箱：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="email" id="edit_email"/>
                        </div>
                    </div>
                                        <div class="control-group">
                        <label class="control-label">微博 ：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="microblog" id="edit_microblog"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">人人：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="renren" id="edit_renren"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">手机：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="phone" id="edit_phone" maxlength="11"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">微信：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="wechat" id="edit_wechat"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">会员状态：</label>
                        <div class="controls" style="margin-top: 5px;">
                            	<input class="input-xlarge focused"  type="radio" value="1" name="status" id="edit_status1" checked="true"/>开启	
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	<input class="input-xlarge focused"  type="radio" value="2" name="status" id="edit_status2"/>关闭	
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input class="btn btn-primary btn-small"  type="button" value="密码重置" onclick="resetPwd();"/>     
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>
